<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05canvas镂空正方形</title>
</head>
<style>
    canvas{
        border: 1px solid #ccc;
    }
</style>
<body>
 <canvas width="600"height="400"></canvas>
 <script>
     var myCanvas=document.querySelector("canvas");
     var ctx =myCanvas.getContext('2d');
     /*绘制两个正方形，一大200一小100，套在一起*/
     ctx.moveTo(100,100);
     ctx.lineTo(300,100);
     ctx.lineTo(300,300);
     ctx.lineTo(100,300);
     ctx.fillStyle='red';
     ctx.closePath();
     ctx.moveTo(150,150);
     ctx.lineTo(150,250);
     ctx.lineTo(250,250);
     ctx.lineTo(250,150);
     ctx.closePath();
     ctx.stroke();
     ctx.fill();
     /*是否填充是根据非零环绕规则来决定*/
 //    看一块区域是否填充
 //    从这个区域拉一条直线
 //    看和这条直线相交的轨迹
 //    如果顺时针轨迹+1
 //    如果逆时针轨迹-1
 //    计算出所有轨迹值
 //    如果为0那么不填充该区域
 //    如果非0那么填充该区域
 </script>
</body>
</html>
